<template>
	<!-- 查询 -->
	<PageContainer>
		<div class="search-container">
			<n-button @click="search">查询</n-button>
		</div>
		<div class="container">
			<BasicTable
				ref="basicTable"
				:title="'用户列表'"
				:columns="columns"
				:pagination="{pageSize:10,pageNum:1}"
				:loadUrl="getUserList"
				@fetch-success="fetchSuccess"
			>
				<template v-slot:toolRight>
					<n-button type="primary" class="mr-10" size="tiny" @click="addOrEditUser()">新增</n-button>
				</template>
			</BasicTable>
		</div>
		<UserDrawer ref="userDrawer"></UserDrawer>
	</PageContainer>
</template>

<script setup lang="ts">
	import { reactive, ref, h } from 'vue';
	import { BasicTable } from '@/components/Common/BasicTable';
	import { getUserList } from '@/api/system';
	import { useMessage,NTag,NButton } from 'naive-ui';
	import { RowData } from 'naive-ui/es/data-table/src/interface';
	import UserDrawer from "@/views/system/user/components/UserDrawer.vue"
	import PageContainer from '@/components/Common/PageContainer/index.vue'
	const message = useMessage();
	const columns = reactive([
		{
			title: '姓名',
			key: 'user_name'
		},
		{
			title: '登录名',
			key: 'login_name'
		},
		{
			title: '性别',
			key: 'sex',
			render(row:RowData){
				return h(
						NTag,
						{
							bordered:false,
							type: row.sex === 0? 'success':'error'
						},
						{default:()=>row.sex === 0?"男":"女"}
				)
			}
		},
		{
			title: '年龄',
			key: 'age'
		},
		{
			title: '手机号',
			key: 'mobile'
		},
		{
			title: '部门名称',
			key: 'depart_name'
		},
		{
			title:'操作',
			key:'action',
			render(row:RowData){
				return [
					h(
							NButton,
							{
								type: 'primary',
								size: 'tiny',
								onClick:() => addOrEditUser(row,true)
							},
							{default:()=>"编  辑"}
					),
					h(
							NButton,
							{
								type: 'error',
								size: 'tiny',
								class: 'ml-10',
								onClick:() => deleteUser(row)
							},
							{default:()=>"删  除"}
					),
				]
			}
		}
	])
	const basicTable = ref(null)
	
	const params = {
		'user_name':'zh'
	}
	function search(){
		basicTable.value?.initData(params)
	}
	const userDrawer = ref(null)
	function addOrEditUser(row:RowData,flag:Boolean | null){
		userDrawer.value?.open(row,flag)
	}
	function deleteUser(row:RowData){
		message.success("删除成功")
	}
</script>

<style lang="scss" scoped>
	@mixin bg-border{
		padding: 10px;
		background-color: #fff;
		border-radius: 5px;
	} 
	.search-container{
		@include bg-border();
		margin-bottom: 10px;
	}
	.container {
		height: calc(100% - 30px);
		overflow:hidden;
		padding:10px;
		background: #fff;
	}
</style>